<!--
 * @Date: 2022-02-24 19:09:42
 * @Author: 陶子
 * @LastEditTime: 2023-06-12 14:26:05
 * @FilePath: \jk_one-stop_pc\src\views\workManagement\workOrder\workOrderDetail.vue
 * @pageName: 这是--(报工详情)--页面
-->
<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <div class="page-scroll-wrap">
      <div>
        <div>
          <a-card title="工序信息" :bordered="false" style="margin-top: 12px">
            <div class="item-wrap" style="box-sizing: border-box; padding: 0 4px">
              <div class="wrapLeft">
                <div class="detail-item">
                  <p class="subtitle">工单编号</p>
                  <p class="secondary-text">{{ workOrderInfo.orderCode || '--' }}</p>
                </div>
                <div class="detail-item">
                  <p class="subtitle">生产物品</p>
                  <p class="secondary-text">{{ workOrderInfo.goodsName || '--' }}</p>
                </div>
                <div class="detail-item">
                  <p class="subtitle">单位</p>
                  <p class="secondary-text">{{ workOrderInfo.spec || '--' }}</p>
                </div>
              </div>
            </div>
            <div class="item-wrap" style="margin-top: 40px">
              <div class="wrapLeft">
                <div class="detail-item">
                  <p class="subtitle">工序</p>
                  <p class="secondary-text">{{ workOrderInfo.processesName || '--' }}</p>
                </div>
                <div class="detail-item" style="flex: 2;">
                  <p class="subtitle">计划数</p>
                  <p class="secondary-text">{{ workOrderInfo.basicUnit || '--' }}</p>
                </div>
              </div>
            </div>
            <div class="item-wrap" style="margin-top: 40px">
              <div class="wrapLeft">
                <div class="detail-item">
                  <p class="subtitle">操作人</p>
                  <p class="secondary-text">{{ workOrderInfo.reportNum || '--' }}</p>
                </div>
                <div class="detail-item" style="flex: 2;">
                  <p class="subtitle">报工数</p>
                  <p class="secondary-text">
                    {{ (workOrderInfo.planStartTime || '-') + '~' + (workOrderInfo.planEndTime || '-') }}
                  </p>
                </div>
                
              </div>
            </div>
            <div class="item-wrap" style="margin-top: 40px">
              <div class="wrapLeft">
                <div class="detail-item">
                  <p class="subtitle">合格数</p>
                  <p class="secondary-text">{{ workOrderInfo.reportQualifiedNum || '--' }}</p>
                </div>
                <div class="detail-item">
                  <p class="subtitle">不合格数</p>
                  <p class="secondary-text">{{ workOrderInfo.reportUnqualifiedNum || '--' }}</p>
                </div>
                <div class="detail-item">
                  <p class="subtitle">报工时间</p>
                  <p class="secondary-text">
                    {{ unqualifiedString || '-' }}
                  </p>
                </div>
              </div>
            </div>
            <div class="item-wrap" style="margin-top: 40px">
              <div class="wrapLeft">
                <div class="detail-item">
                  <p class="subtitle">不合格原因</p>
                  <p class="secondary-text">
                    {{ unqualifiedString || '-' }}
                  </p>
                </div>
              </div>
            </div>
          </a-card>
          <a-card title="自定义信息" :bordered="false" style="margin-top: 12px">
            <div class="item-wrap" style="box-sizing: border-box; padding: 0 4px">
            </div>
          </a-card>
        </div>
      </div>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { numFormat } from '@/utils/util'
import { productionReportingDetail } from '@/api/produce/index'
export default {
  data() {
    return {
      processId: '',
      reportId: '',
      jkeForm: {
        title: '报工详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      numFormat,
      workOrderInfo: {
        reportUnqualifiedNum: 0,
        num: 0,
        unqualifiedVos: [],
        reportQualifiedNum: 0,
      },
    }
  },
  components: {
    crumbs,
    FileDetail,
  },
  watch: {
    'jkeForm.visible': function (val) {
      if (!val) {
        this.$emit('cancel')
      }
    },
  },
  computed: {
    percent() {
      let number =
        ((this.workOrderInfo.reportQualifiedNum + this.workOrderInfo.reportUnqualifiedNum) / this.workOrderInfo.num) *
        100
      return Math.floor(number * 100) / 100
    },
    processNum() {
      if (this.workOrderInfo) {
        let nums =
          this.workOrderInfo && this.workOrderInfo.reportQualifiedNum ? this.workOrderInfo.reportQualifiedNum : 0
        let num2 =
          this.workOrderInfo && this.workOrderInfo.reportUnqualifiedNum ? this.workOrderInfo.reportUnqualifiedNum : 0
        let sum = nums + num2
        let num3 = this.workOrderInfo && this.workOrderInfo.num ? this.workOrderInfo.num : 0
        return Math.floor(sum * 100) / 100 + '/' + Math.floor(num3 * 100) / 100
      } else {
        return 0 / 0
      }
    },
    unqualifiedString() {
      let list = ((this.workOrderInfo && this.workOrderInfo.unqualifiedVos) || []).map((item) => {
        return item.unqualifiedName + ':' + item.unqualifiedNum
      })
      return list.join()
    },
  },
  mounted() {
    // this.jkeForm.visible = true
  },
  methods: {
    initDetail(query) {
      this.jkeForm.visible = true
      let obj = {
        processId: query.processesId || query.processId,
        reportId: query.referencedId ? query.referencedId : query.id,
      }
      this.getDetail(obj)
    },
    getDetail(obj) {
      productionReportingDetail(obj).then((res) => {
        if (res.success) {
          if (res.result) {
            this.workOrderInfo = res.result
            let allocateType = this.$route.query.allocateType
            let allocateTypeText = '--'
            if (allocateType == 'receive') {
              allocateTypeText = '领料'
            } else if (allocateType == 'prepare') {
              allocateTypeText = '备料'
            }
            this.workOrderInfo.allocateTypeText = allocateTypeText
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.fixed-tab {
  /deep/.ant-tabs-top {
    position: fixed;
    top: 47px; //自己根据需求设定
    width: 100%;
    z-index: 999;
    .ant-tabs-bar {
      padding-left: 14px;
      background: #fff;
    }
  }
}
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  .wrapLeft {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .detail-item {
      flex: 1;
    }
  }
  .wrapRight {
    width: 116px;
    .detail-item {
      .subtitle {
        text-align: right;
      }
      .secondary-text {
        text-align: right;
      }
    }
  }
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}

.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px 0 24px -40px;
}
.tabBox {
  margin-top: 20px;
}
/deep/ .ant-tabs-bar {
  margin-bottom: 0;
}
div.explaneBox {
  .flex(flex-end, center);
  margin-bottom: 40px;
  div.one {
    .flex(center, center);

    div.color {
      width: 14px;
      height: 14px;
      background: #dfdfdf;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.two {
    .flex(center, center);
    margin-left: 40px;
    div.color {
      width: 14px;
      height: 14px;
      background: #1890ff;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.three {
    .flex(center, center);
    margin-left: 40px;
    div.color {
      width: 14px;
      height: 14px;
      background: #00b042;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }
}
div.progressBox {
  .flex(flex-start, center);
  flex-wrap: wrap;
  div.itemPro {
    .flex(flex-start, center);
    margin-bottom: 16px;
    &:nth-last-child(1) .itemRight {
      display: none;
    }
    div.itemLeft {
      div.leftTop {
        width: 180px;
        text-align: center;
        font-size: 16px;
        color: #444444;
        margin-bottom: 14px;
      }

      div.leftBot {
        width: 180px;
        height: 138px;
        background: rgba(244, 245, 246, 1);
        border-radius: 6px;
        .flex(space-between, center,column);
        box-sizing: border-box;
        padding: 13px 0;
        div.botOen {
          font-size: 14px;
          color: #888888;
        }

        div.botTwo {
          font-size: 14px;
          color: #888888;
        }

        div.botThree {
          font-size: 14px;
          color: #888888;
        }

        .havePadding {
          .flex(center, center);
          width: 134px;
          font-size: 12px;
          color: #888888;
        }
      }
    }

    div.itemRight {
      height: 2px;
      width: 64px;
      background: #f4f5f6;
      position: relative;
      top: 16px;
    }
  }
}
/deep/ .ant-progress-inner {
  background-color: #dfdfdf;
}
.title {
  font-size: 16px;
  color: #191f25;
  font-weight: bold;
  span {
    font-size: 14px;
    color: #888888;
  }
}
.flexend {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}
.pad {
  padding-right: 20px;
}
</style>
